/**
 * =======================================================================
 * Form Components Styles - 表单组件样式
 * =======================================================================
 *
 * 这个文件包含了表单组件的样式，主要用于编辑页面，包括：
 * - 表单容器样式
 * - 表单项样式
 * - 输入框和选择器样式
 * - 表单按钮样式
 * - 表单响应式设计
 *
 * @version 1.0.0
 * @author Anypay Team
 * =======================================================================
 */

/* =======================================================================
   1. 表单容器样式
   ======================================================================= */

/**
 * 表单主容器
 * Apple风格的表单容器设计
 */
.anypay-form-container {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.02);
}

/**
 * 表单分组容器
 * 用于分组相关的表单字段
 */
.anypay-form-group {
  margin-bottom: 24px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/**
 * 表单分组标题
 */
.anypay-form-group-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* =======================================================================
   2. 表单项样式
   ======================================================================= */

/**
 * 表单项基础样式
 */
.anypay-form-item {
  margin-bottom: 20px;
}

/**
 * 表单标签样式
 * Apple风格的标签设计
 */
.anypay-form-item .ant-form-item-label > label {
  color: #424245;
  font-weight: 500;
  font-size: 14px;
}

/**
 * 必填字段标记
 */
.anypay-form-item .ant-form-item-required::before {
  color: #ff3b30; /* Apple红色 */
}

/**
 * 表单项帮助文本
 */
.anypay-form-item .ant-form-item-explain {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}

/* =======================================================================
   3. 输入控件样式
   ======================================================================= */

/**
 * 输入框基础样式
 * Apple风格的输入框设计
 */
.anypay-form-item .ant-input,
.anypay-form-item .ant-input-number,
.anypay-form-item .ant-select-selector,
.anypay-form-item .ant-picker {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  font-size: 14px;
}

/**
 * 输入框焦点状态
 */
.anypay-form-item .ant-input:focus,
.anypay-form-item .ant-input-number:focus,
.anypay-form-item .ant-select-focused .ant-select-selector,
.anypay-form-item .ant-picker:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

/**
 * 文本域样式
 */
.anypay-form-item .ant-input {
  min-height: 40px;
}

.anypay-form-item textarea.ant-input {
  min-height: 80px;
  resize: vertical;
}

/**
 * 占位符样式
 */
.anypay-form-item .ant-input::placeholder,
.anypay-form-item .ant-select .ant-select-selection-placeholder {
  color: #86868b;
}

/* =======================================================================
   4. 选择器和日期选择器样式
   ======================================================================= */

/**
 * 下拉选择器样式
 */
.anypay-form-item .ant-select-dropdown {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/**
 * 日期选择器弹出层样式
 */
.anypay-form-item .ant-picker-dropdown {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* =======================================================================
   5. 开关和单选框样式
   ======================================================================= */

/**
 * 开关组件样式
 */
.anypay-form-item .ant-switch {
  background-color: rgba(0, 0, 0, 0.1);
}

.anypay-form-item .ant-switch-checked {
  background-color: #007aff;
}

/**
 * 单选框和复选框样式
 */
.anypay-form-item .ant-radio-wrapper,
.anypay-form-item .ant-checkbox-wrapper {
  color: #1d1d1f;
  font-size: 14px;
}

.anypay-form-item .ant-radio-checked .ant-radio-inner,
.anypay-form-item .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #007aff;
  border-color: #007aff;
}

/* =======================================================================
   6. 表单按钮样式
   ======================================================================= */

/**
 * 表单按钮区域
 */
.anypay-form-actions {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/**
 * 表单主要按钮
 */
.anypay-form-actions .ant-btn-primary {
  background: #007aff;
  border-color: #007aff;
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 24px;
  height: auto;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

.anypay-form-actions .ant-btn-primary:hover {
  background: #005ce6;
  border-color: #005ce6;
  transform: translateY(-0.5px);
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.15);
}

/**
 * 表单次要按钮
 */
.anypay-form-actions .ant-btn:not(.ant-btn-primary) {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, 0.1);
  color: #424245;
  font-weight: 500;
  padding: 8px 24px;
  height: auto;
  transition: all 0.2s ease;
}

.anypay-form-actions .ant-btn:not(.ant-btn-primary):hover {
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-0.5px);
}

/* =======================================================================
   7. 表单响应式设计
   ======================================================================= */

/**
 * 移动端表单适配
 */
@media (max-width: 768px) {
  .anypay-form-container {
    padding: 16px;
  }

  .anypay-form-group {
    padding: 16px;
    margin-bottom: 16px;
  }

  .anypay-form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .anypay-form-actions .ant-btn {
    width: 100%;
  }
}

/**
 * 平板端表单适配
 */
@media (max-width: 1024px) {
  .anypay-form-container {
    padding: 20px;
  }
}